<!doctype html>
<html>
<head>
	<title>点击切换图片</title>
	<meta charset="UTF-8"/>
	<style>
	
	*{
		margin:0;
		padding:0;
	}
		a{
			text-decoration:none;/*去掉a标签超链接的下划线*/
		}
		ul li{
			list-style:none;/*去掉ul列表前面的点*/
		}
		#bos{
			width:550px;
			height:400px;
			/*overflow:hidden;*/
			margin:50px auto;
			position:relative;
		}
		#box1{
			width:1000%;
			height:100%;
		}
		#box1 img{
			width:550px;
			height:400px;
			float:left;
			cursor:pointer;
		}
		#box2 p{
			width:30px;
			height:35px;
			line-height:35px;
			text-align:center;
			display:inline-block;
			cursor:pointer;
			font-size:30px;
			opacity:0.8;
			background-color:#003333;
			z-index:2;
		}
		#box2 .left{
			position:absolute;
			left:0;
			top:180px;
		}
		#box2 .right{
			position:absolute;
			top:180px;
			right:0;
		}
	</style>
</head>
<body>
	<div id="bos">
		<div id="box1">
			<img id="img1"src="img/erjue (1).jpg" alt="" />
			<img id="img2" src="img/erjue (2).jpg" alt=""/>
		</div>
		<div id="box2">
			<p class="left"> < </p>
			<p class="right"> > </p>
		</div>

	</div>
</body>

	<script>
		var oBox1=document.getElementById("box1"),
			oP=document.querySelectorAll("p"),
			length=oP.length;
			
		//左右按钮
			oP[0].onclick=function(){
				oBox1.style.left=-550+"px";
			}
			oP[1].onclick=function(){
				alert("sss");
			}
			/*alert(oP.length);
			for(var i=0;i<length;i++){
				oP[i].onclick=function(){
					this.
				}
			}*/

	</script>
</html>